<template>
  <div class="loginFormStyle">
      <div class="title">
        <img src="../assets/logo.png" alt="">
        子轩OJ
      </div>
    <a-form :model="loginForm"  class="login" :auto-label-width="true" layout="horizontal">
      <a-form-item field="userAccount" label="账号:" validate-trigger="input" required>
        <a-input v-model="loginForm.userAccount" placeholder="请输入账号" />

      </a-form-item>
      <a-form-item field="userPassword" label="密码:" validate-trigger="input" required>
        <a-input v-model="loginForm.userPassword" placeholder="请输入密码" />
      </a-form-item>
      <a-form-item >
        <a-button type="primary" html-type="submit" class="btn_sty" @click="loginSubmit"> 登 录 </a-button>
      </a-form-item>
    </a-form>
  </div>

</template>
<script setup lang="ts">
import { reactive } from 'vue';
import {UserControllerService} from "../../generated";
import {useStore} from "vuex";
import {useRouter} from "vue-router";

const store = useStore();
const router = useRouter();
const loginForm =reactive({
  userAccount:'yupi',
  userPassword:'12345678',
})

const loginSubmit = async ()=>{
 const res = await UserControllerService.userLoginUsingPost(loginForm);
 if(res.code===0){
   //调用user.ts在登陆一次  跳转页面到首页
   await store.dispatch('user/getLoginUser', '')
   await router.push('/')
 }
}
</script>
<style scoped>
  .loginFormStyle{
    position: fixed;
    width: 100%;
    height: 100%;
    background:url("https://gw.alipayobjects.com/zos/rmsportal/FfdJeJRQWjEeGTpqgBKj.png");

  }
  .login{
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 20%;
    padding: 5px;
  }
.btn_sty{
  width: 100%;
}

.title{
  /*left: 0;*/
  /*right: 0;*/
  font-size: 40px;
  color: #1890FF;
  text-align: center;
}

</style>